<template>
  <!-- 只能有一个根标签 -->
  <div>
    <el-card class="box-card">
      <!-- 查询模块 -->
      <el-form :model="formInline" ref="formInline" class="demo-form-inline" label-width="80px" size="small">
        <el-row type="flex">
          <!-- 标签名称 -->
          <el-col>
            <el-form-item label="标签名称" style="width: 100%;">
              <el-input v-model="formInline.tags" placeholder="请输入" style="width: 100%;">
              </el-input>
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col>
            <el-form-item label="城市">
              <el-select v-model="formInline.province" placeholder="请输入" style="width: 100%;" @change="getProvince">
                <el-option v-for="item in provinces" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 地区 -->
          <el-col>
            <el-form-item label="地区">
              <el-tooltip class="item" effect="dark" content="请先选择城市" placement="top">
                <el-select v-model="formInline.city" placeholder="请选择" style="width: 100%;" @focus="getCitys" :disabled="!formInline.province">
                <el-option v-for="item in citys" :key="item" :label="item" :value="item" />
              </el-select>
              </el-tooltip>

            </el-form-item>
          </el-col>
          <!--企业简称  -->
          <el-col>
            <el-form-item label="企业简称">
              <el-input v-model="formInline.shortName" placeholder="请输入" style="width: 100%;">
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>

        <el-row type="flex">
          <!-- 状态 -->
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="formInline.state1" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in this.status" :key="item.value" :label="item.label" :value="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="6">
            <el-form-item style="">
              <el-button @click="removeForm">清除</el-button>
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="addbtn">
              <el-button type="success" icon="el-icon-edit" @click="showDialog=true" size="small">新增用户</el-button>
            </div>
          </el-col>

        </el-row>

      </el-form>
      <!-- 公共组件 -->
      <PageTool :show-before="true">
        <span slot="before">共{{ this.page.total}}条记录</span>
      </PageTool>

      <!-- 放置表格和分页 -->
      <!-- 表格 -->
      <el-table ref="singleTable" :data="list" highlight-current-row style="width: 100%">
        <el-table-column class="index" type="index" width="80" :fit="false" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="number" label="企业编号" min-width="80" align="center">
        </el-table-column>
        <el-table-column prop="shortName" label="企业简称" min-width="80" align="center"></el-table-column>
        <el-table-column prop="tags" label="标称" min-width="80" align="center"></el-table-column>
        <el-table-column prop="creatorID" label="创建者" min-width="80" align="center"></el-table-column>
        <el-table-column prop="addDate" label="创建日期" min-width="80" align="center" :formatter="formatTime">
        </el-table-column>
        <el-table-column prop="remarks" label="备注" min-width="80" align="center"></el-table-column>
        <el-table-column prop="state" label="状态" min-width="80" align="center" :formatter="formatState">
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center" width="180">
          <template slot-scope="{row}">
            <!-- 修改 -->
            <el-tooltip class="item" effect="dark" content="修改" placement="top">
              <el-button type="primary" plain icon="el-icon-edit" circle @click="revise(row.id)" :disabled="row.state === 0"></el-button>
            </el-tooltip>
            <!-- 状态 -->
            <el-tooltip class="item" effect="dark" content="状态" placement="top">
              <el-button :type="row.colType" plain :icon="row.icon" circle @click="changestate(row.id,row)">
              </el-button>
            </el-tooltip>
            <!-- 删除 -->
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="danger" plain icon="el-icon-delete" circle @click="del(row.id)" :disabled="row.state === 0"></el-button>
            </el-tooltip>

          </template>
        </el-table-column>

      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination layout="prev, pager, next, sizes, jumper" background :page-sizes="[10, 20, 30, 40]"
          :total="page.total" :current-page="page.page" :page-size="page.pagesize" @current-change="change"
          @size-change="handleSizeChange" />
      </el-row>

    </el-card>
    <!-- 新增修改公司弹出框组件 -->
    <AddCompanys :showDialog.sync="showDialog" :id="id" ref="child"></AddCompanys>
  </div>
</template>

<script>
import { getCompanysList, delCompanys, getCompanyInfo, changeState } from '@/api/hmmm/companys.js'
import AddCompanys from '@/module-hmmm/components/companys-add'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { status } from '@/api/hmmm/constants.js'
import moment from 'moment'
export default {
  name: 'Companys',
  props: {},
  data () {
    return {
      formInline: {
        page: 1,
        pagesize: 10,
        tags: null,
        province: null,
        city: null,
        shortName: null,
        state: null,
        state1: null

      },
      list: [],
      page: {
        page: 1,
        pagesize: 10,
        total: 0 // 总条目数

      },
      loading: false,
      showDialog: false,
      id: null,
      provinces: [],
      citys: [],
      status: status

    }
  },
  created () {
    this.getCompanysList()
    this.provinces = provinces()
  },
  mounted () { },
  // 组件
  components: {
    AddCompanys
  },
  // 计算属性
  computed: {},
  // 侦听
  watch: {},
  methods: {
    // 渲染页面
    async getCompanysList () {
      const { data: { items, counts } } = await getCompanysList(this.page)

      this.list = items
      this.list.forEach(item => {
        if (item.state === 1) {
          item.icon = 'el-icon-check'
          item.colType = 'success'
        } else {
          item.icon = 'el-icon-close'
          item.colType = 'warning'
        }
      })
      this.page.total = counts
    },
    // 改变页码
    change (newpage) {
      this.page.page = newpage
      this.getCompanysList()
    },
    // 改变pagesize,一页可以看多少条
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getCompanysList()
    },
    // 删除
    async del (id) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delCompanys(id)

      const { data: { items } } = await getCompanysList(this.page)
      if (items.length === 0 && this.page.page > 1) {
        this.page.page--
        this.getCompanysList()
      } else {
        this.list = items
      }
      this.$message.success('删除成功')
      this.getCompanysList()
    },
    // 修改公司
    async revise (id) {
      this.showDialog = true
      this.id = id
      const { data } = await getCompanyInfo(id)
      this.$refs.child.formData = data
    },
    // 获取城市
    getProvince () {
      this.getCitys()
      if (this.formInline.province) {
        this.formInline.city = this.citys[0]
      }
    },
    // 获取地区
    getCitys () {
      this.citys = citys(this.formInline.province)
    },
    // 查询
    async search () {
      if (this.formInline.state1 === '启用') {
        this.formInline.state = 1
      } else if (this.formInline.state1 === '禁用') {
        this.formInline.state = 0
      }
      const { data: { items, counts } } = await getCompanysList(this.formInline)
      this.list = items
      this.page.total = counts
      this.list.forEach(item => {
        if (item.state === 1) {
          item.icon = 'el-icon-check'
          item.colType = 'success'
        } else {
          item.icon = 'el-icon-close'
          item.colType = 'warning'
        }
      })
    },
    // 清除
    removeForm () {
      this.formInline = {
        page: 1,
        pagesize: 10,
        total: 0, // 总条目数
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: ''
      }
      this.getCompanysList()
    },
    // 格式化状态
    formatState (row, column, cellValue, index) {
      const obj = status.find(item => item.value === cellValue)
      return obj ? obj.label : '未知'
    },
    // 格式化时间
    formatTime (row, column, cellValue, index) {
      return moment(cellValue).format('YYYY/MM/DD  hh:mm:ss')
    },
    // 改变状态
    async changestate (id, row) {
      await this.$confirm(`是否${row.state === 1 ? '禁用' : '启用'}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const obj = this.list.find(item => item.id === id)
      console.log(this.list[id])
      if (obj.state === 1) {
        obj.state = 0
        row.icon = 'el-icon-check'
        row.colType = 'success'
      } else {
        obj.state = 1
        row.icon = 'el-icon-close'
        row.colType = 'warning'
      }
      await changeState(id, obj.state)
      await this.getCompanysList()
    }
  }
}
</script>

<style scoped>
.box-card {
  margin: 25px 20px;

}

.addbtn {
  display: inline-block;
  float: right;

}

.ipt {
  width: 100% !important;
}
</style>
